<template>
	<view>
		<view class="context">
			<view class="original">
				<text>原始密码</text>
				<input class="pwd-input" :type="originalType" v-model="orginalPassword" />
				<uni-icons @click="showPwd(0)" :type="orginalEye" v-show="orginalPassword.length > 0" color="#808080" size="14"></uni-icons>
			</view>
			<view class="new">
				<text>新密码</text>
				<input class="pwd-input" :type="newType" v-model="newPassword" />
				<uni-icons @click="showPwd(1)" type="eye" v-show="newPassword.length > 0" color="#808080" size="14"></uni-icons>
			</view>
			<view class="again">
				<text>再输一遍</text>
				<input class="pwd-input" :type="againType" v-model="again" />
				<uni-icons @click="showPwd(2)" type="eye" v-show="again.length > 0" color="#808080" size="14"></uni-icons>
			</view>
			<view>
				<button @click="submit" type="default" class="btn">提交修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				orginalPassword: '',
				newPassword: '',
				again: '',
				originalType: 'password',
				newType: 'password',
				againType: 'password',
				orginalEye: 'eye',
				newEye: 'eye',
				againeye: 'eye'
			}
		},
		methods: {
			showPwd(type) {
				if (type == 0) {
					this.originalType = this.originalType === 'password' ? 'text' : 'password'
					this.orginalEye = this.originalType === 'password' ? 'eye' : 'eye-slash-filled'
				} else if (type == 1) {
					this.newType = this.newType === 'password' ? 'text' : 'password'
					this.newEye = this.newType === 'password' ? 'eye' : 'eye-slash-filled'
				} else if (type == 2) {
					this.againType = this.againType === 'password' ? 'text' : 'password'
					this.againEye = this.againType === 'password' ? 'eye' : 'eye-slash-filled'
				}
			},
			submit(){
				// TODO: 修改密码
			}

		}
	}
</script>

<style lang="scss">
	.context {
		padding: 30rpx;

		view {
			display: flex;
			flex-direction: row;
			align-content: space-around;
			height: 60rpx;
			margin: 30rpx 0;

			text {
				line-height: 60rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-placeholder;
				width: 140rpx;
			}

			.pwd-input {
				padding: 20rpx;
				border: none;
				background-color: #f7f7fa;
				flex-grow: 999;
			}
			
			.btn {
				width: 100%;
				margin-top: 30rpx;
				height: 80rpx;
				font-size: $uni-font-size-lg;
				line-height: 80rpx;
			}
		}
	}
</style>
